//顶部分组列表
import React, { useRef, useState, useEffect } from "react";
import { Button, Popover, Alert, Dropdown, Menu, Radio } from "antd";
import styles from "./index.module.less";
import { EditOutlined, DeleteOutlined, DownOutlined } from "@ant-design/icons";

const GroupContent = ({ groupList, query, handleSetQuery, handleDeleteGroup, handleEditGroup }) => {
	const [isOverflow, setIsOverflow] = useState(false);
	const containerRef = useRef(null);

	useEffect(() => {
		const checkOverflow = () => {
			const current = containerRef.current;
			if (current) {
				const isOverflowing = current.scrollWidth > current.clientWidth;
				setIsOverflow(isOverflowing);
			}
		};

		window.addEventListener("resize", checkOverflow);
		checkOverflow();

		return () => window.removeEventListener("resize", checkOverflow);
	}, [groupList]);

	//点击选择分组
	const handleSelectGroup = item => {
		handleSetQuery({
			groupId: item.id
		});
	};

	return (
		<div className={styles.box}>
			{groupList.length == 0 ? (
				<Alert
					style={{ width: '100%'}}
					type="info"
					showIcon
					message="店铺支持快捷查询分组，基于填入的查询条件保存为快捷分组，搜索按钮右侧图标下拉【创建为店铺分组】"
				/>
			) : (
				<>
					<div ref={containerRef} className={styles.itemBox}>
						{groupList.map(item => (
							<Dropdown
								key={item.id}
								trigger="hover"
								overlay={
									<Menu>
										<Menu.Item key="1" onClick={() => handleEditGroup(item)}>
											<EditOutlined />
											<span style={{ marginLeft: "6px" }}>重命名</span>
										</Menu.Item>
										<Menu.Item key="2" onClick={() => handleDeleteGroup(item)}>
											<DeleteOutlined />
											<span style={{ marginLeft: "6px" }}>删除</span>
										</Menu.Item>
									</Menu>
								}
							>
								<div
									onClick={() => handleSelectGroup(item)}
									className={item.id == query.groupId ? styles.itemContentSelect : styles.itemContent}
									key={item.id}
								>
									{item.name}
								</div>
							</Dropdown>
						))}
					</div>
					{isOverflow && (
						<Dropdown
							trigger="hover"
							overlay={
								// <Menu>
								// 	{groupList.map(item => (
								// 		<Menu.Item onClick={() => handleSelectGroup(item)} key={item.id}>
								// 			{item.name}
								// 		</Menu.Item>
								// 	))}
								// </Menu>

								<Menu>
									{groupList.map(item => (
										<Menu.Item key={item.id}>
											<Dropdown.Button
												type={item.id == query.groupId ? "primary" : undefined}
												icon={<DownOutlined />}
												overlay={
													<Menu>
														<Menu.Item key="1" onClick={() => handleEditGroup(item)}>
															<EditOutlined />
															<span style={{ marginLeft: "6px" }}>重命名</span>
														</Menu.Item>
														<Menu.Item key="2" onClick={() => handleDeleteGroup(item)}>
															<DeleteOutlined />
															<span style={{ marginLeft: "6px" }}>删除</span>
														</Menu.Item>
													</Menu>
												}
												onClick={() => handleSelectGroup(item)}
											>
												{item.name}
											</Dropdown.Button>
										</Menu.Item>
									))}
								</Menu>
							}
						>
							<Button className={styles.moreButton}>...</Button>
						</Dropdown>
					)}
				</>
			)}
		</div>
	);
};

export default GroupContent;
